import Vue from 'vue'
import Vuex from 'vuex'

import * as type from './mutations-types'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象

const moduleA = {
    state: {
        name: '小张'
    },
    mutations: {
        [type.UPDATANAME](state, payload) {
            state.name = payload.name;
        },
        [type.MODULES_ACTIONSUPDATANAME](state, payload) {
            state.name = payload.payloadName;
        },
    },
    actions: {
        modules_actionsUpdataName(context, payload) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    // context里面还有很多东西的
                    console.log(context);

                    context.commit({
                        type: type.MODULES_ACTIONSUPDATANAME,
                        payloadName: payload.name
                    });

                    resolve('modules里的name被成功修改')
                }, 1000);
            })
        }
    },
    getters: {
        fullName(state) {
            return state.name + '1111';
        },
        fullName2(state, getters) {
            // 第二个参数getters 是modulseA中的getters
            return getters.fullName + '2222';
        },
        fullName3(state, getters, rootstate) {
            // modules中的getters有第三个参数，rootstate表示根的状态
            return getters.fullName2 + rootstate.count;
        },
    }
}

const store = new Vuex.Store({
    state: {
        count: 1000,
        students: [
            { id: 110, name: 'why', age: 18 },
            { id: 111, name: 'kobe', age: 21 },
            { id: 112, name: 'licy', age: 25 },
            { id: 113, name: 'lilei', age: 30 },
        ],
        info: {
            name: '小刘',
            age: 21,
            height: 1.98,
        },
    },
    mutations: {
        // mutations里面定义方法的时候会自动传入state参数
        [type.INCREMENT](state) {
            state.count++;
        },
        // ['decrement'] 和 decrement 的写法是一样的
        // ['decrement'](state) {
        //     state.count--;
        // },
        [type.DECREMENT]: state => { state.count-- },

        // incrementCount(state, number) {
        //     state.count += number;
        // },
        // 如果用特殊的提交风格，后面的参数要写成载荷payload，然后再到payload里面去取参数
        [type.INCREMENTCOUNT](state, payload) {
            // console.log(payload);
            // console.log(payload.number);
            state.count += payload.number;
        },
        [type.ADDSTUDENT](state, stu) {
            state.students.push(stu);
        },

        [type.UPDATAINFO](state, payload) {
            // 响应式更改属性
            state.info.name = payload.name;
        },
        [type.ADDPROPONE](state) {
            // 给info增加新的属性,但未添加到state中，不能做到响应式
            state.info['address'] = 'L.A. 洛杉矶';
            console.log(state.info);
        },
        [type.ADDPROPTWO](state) {
            // 响应式的添加属性
            // Vue.set(修改的对象，key，value)
            Vue.set(state.info, 'addressTwo', '广东');
        },
        [type.DELAGEPROP](state) {
            // 不能响应式的删掉属性
            delete state.info.age;
        },
        [type.DELAGEPROPTWO](state) {
            // 响应式的删除age属性
            Vue.delete(state.info, 'age');
        },
        [type.ASYNCUPDATAmESSAGE](state, payload) {
            // saync异步 更新信息(不能在Mutations里进行异步操作)
            setTimeout(() => {
                state.info.name = payload.name;
            }, 1000);
        },
        [type.ACTIONSUPDATAMESSAGE](state) {
            state.info.name = 'coderWhy';
        },
        [type.ACTIONSUPDATAAGE](state, payload) {
            state.info.age = payload.age;
        },
        [type.SUCCESSDUPDATA](state) {
            state.info.height = '2米';
        },
        [type.SUCCESSDUPDATAMESSAGE](state, payload) {
            state.info.height = payload.height
        },
        [type.SUCCESSDUPDATAMESSAGE_GOOD](state, payload) {
            state.info.height = payload.height
        },
    },
    actions: {
        // content 上下文（理解成store对象）
        actionsUpdataInfo(context) {
            setTimeout(() => {
                context.commit(type.ACTIONSUPDATAMESSAGE);
            }, 1000);
        },
        actionsUpdataAge(context, payload) {
            setTimeout(() => {
                context.commit(type.ACTIONSUPDATAAGE, payload);
                console.log(payload);
            }, 1000);
        },
        succeedUpdata(context, payload) {
            setTimeout(() => {
                context.commit(type.SUCCESSDUPDATA);
                payload();
            }, 1000);
        },
        succeedUpdataMessage(context, payload) {
            setTimeout(() => {
                context.commit(type.SUCCESSDUPDATAMESSAGE, payload.message);
                console.log(payload.message);
                payload.success();
            }, 1000);
        },
        succeedUpdataMessage_good(context, payload) {
            return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        // 这里也有根的概念，只是根跟自己一样
                        console.log(context, 'store对象中打印context');

                        context.commit(type.SUCCESSDUPDATAMESSAGE_GOOD, payload);
                        console.log(payload);

                        resolve('里面已经完成修改了');
                    }, 1000);
                })
                // .then(res => { console.log(res); })
        },
    },
    getters: {
        // getters 类似于计算属性
        powerCount(state) {
            return state.count * state.count;
        },
        studentsMessage(state) {
            return state.students;
        },
        greaterAgesCount: state => {
            // return state.students.filter(s => s.age >= 20).length;
            return state.students.filter(s => s.age >= 20);
        },
        greaterAgesCountLength: (state, getters) => {
            // return state.students.filter(s => s.age >= 20).length;
            return getters.greaterAgesCount.length;
        },
        // 获取年龄大于age的学生
        // moreAgesStu(state) {
        //     // return function(age) {
        //     //     return state.students.filter(s => s.age >= age);
        //     // };
        //     return age => { return state.students.filter(s => s.age >= age) };
        // },
        // 没把return去掉是增加代码可读性
        moreAgesStu: state => {
            return age => {
                return state.students.filter(s => s.age >= age);
            }
        }
    },
    modules: {
        a: moduleA,
    },
})

// 3. 导出store对象
export default store